<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
	export default {
    name: 'LineChart',
    props: ['data'],
	  data() {
      return {
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.data': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        let xAxisData = this.data.data.map((item) => {
          return item.date
        })
        let dataValue = this.data.data.map((item) => {
          return item.value
        })
        this.myChart.setOption({
          title: {
            text: '单位: ' + this.data.unit,
            top: '0',
            right: '0',
            textStyle: {
              color: '#929292',
              fontWeight: 'normal',
              fontSize: '12'
            },
          },
          grid: {
            left: '15px',
            right: '30px',
            top:'30px',
            bottom: '0',
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            extraCssText: 'z-index: 2',
            position: function(point, params, dom, rect, size) {
              dom.style.transform = "translateZ(0)"
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: '#333',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#e7dfd4',
                width: 1,
              }
            },
            axisTick: {
              show: false
            },
          }],
          yAxis: [{
            type: 'value',
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#e7e7e7',
                width: 1,
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#999',
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color: '#e7e7e7',
              }
            },
          }],
          series: [
            {
              type: 'line',
              smooth: true,
              stack: 100,
              itemStyle: {
                normal: {
                  color: '#ff8200',
                  lineStyle: { // 系列级个性化折线样式
                    width: 1,
                    type: 'solid',
                    color: "#ff8200"
                  }
                },
              }, //线条样式
              symbol: 'circle',
              symbolSize: 4,
              areaStyle: {
                color: 'rgba(252, 156, 14, .08)',
              },
              data: dataValue,
            },
          ]
        });
        this.myChart.resize()
        window.addEventListener('resize', () => {
          this.myChart.resize()
        });
      }
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
